import React, { useEffect, useState } from 'react'
import { Observer } from 'mobx-react-lite'
import { useStore } from '@/stores'
import { Carousel } from 'antd'
import { fetchBanner } from '@/requests'
import './index.less'

const useFetchBannerListType = (): [{
  imgUrl: string;
  orderNum: number;
}[]] => {
  const [bannerList, setBannerList] = useState([]);
  // 请求 bannerlist 接口
  const fetchBannerList = async () => {
    const result: any = await fetchBanner();
    setBannerList(result.bannerList);
  }

  useEffect(() => { fetchBannerList(); }, [])

  return [bannerList]
}

const Welcome: React.FC = () => {
  const { common } = useStore();
  const [bannerList] = useFetchBannerListType();

  return (
    <Observer>
      {() => (
        <div>
          <Carousel autoplay style={{ width: '1200px', margin: '0 auto' }}>
            {
              bannerList && bannerList.length > 0 && bannerList.map((k, i) => {
                return (<div key={i}>
                  <img style={{ height: "490px", width: "100%" }} className='CarouselImg' src={k.imgUrl} alt='' />
                </div>)
              })
            }
          </Carousel>
        </div>
      )}
    </Observer>
  )
}

export default Welcome
